---
title: Alert
description: A callout for displaying important information.
---

<ComponentPreview name="p-alert-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/alert
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert" title="components/ui/alert.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
```

```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

## Examples

### With Icon

<ComponentPreview name="p-alert-2" />

### With Icon and Action Buttons

<ComponentPreview name="p-alert-3" />

### Info Alert

<ComponentPreview name="p-alert-4" />

### Success Alert

<ComponentPreview name="p-alert-5" />

### Warning Alert

<ComponentPreview name="p-alert-6" />

### Error Alert

<ComponentPreview name="p-alert-7" />

## Comparing with shadcn

**New Variants**

We've added new colored variants for better semantic meaning:

| Variant   | Description                       |
| --------- | --------------------------------- |
| `info`    | Displays an info alert (blue)     |
| `success` | Displays a success alert (green)  |
| `warning` | Displays a warning alert (yellow) |
| `error`   | Displays a error alert (red)      |

Ensure you have the following variables imported in your CSS file:

- `--destructive-foreground`
- `--info`
- `--info-foreground`
- `--success`
- `--success-foreground`
- `--warning`
- `--warning-foreground`
